
import React, { Component, createRef } from "react";
import type { ReactNode } from 'react'

type inpType = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement

interface iState {
    inp: string
    selectStr: string
    sex: string
    hobby: string[]
}

export default class App extends Component {

    state: iState = {
        inp: '',
        selectStr: '',
        sex: '',
        hobby: []
    }

    changeValue(e: React.ChangeEvent<inpType>) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    changeHobby = (e: React.ChangeEvent<HTMLInputElement>) => {
        // console.log(e.target.value, e.target.checked);

        // 先将原来的数组复制一份
        const arr = [...this.state.hobby]

        if (e.target.checked) {
            // 选中，往数组中添加
            // this.setState({
            //     hobby: this.state.hobby.push(e.target.value)
            // })
            // this.state.hobby.push(e.target.value)
            arr.push(e.target.value)

        } else {
            // 取消选中，数组中删除掉
            // findIndex 找到该内容的索引值，然后将其删除掉 splice
            // 根据取消选中的内容在数组中找到，然后返回它的索引值
            const index = this.state.hobby.findIndex(item => e.target.value == item)

            // 根据索引删除对应的内容
            arr.splice(index, 1)
            // 第三个参数为新增的内容
            // arr.splice(index, 0, '休养生息')
        }

        this.setState({
            hobby: arr
        })


    }

    render() {
        return <>
            <div>
                <div>
                    <h3>{this.state.inp}</h3>
                    <input type="text" name='inp' value={this.state.inp} onChange={e => this.changeValue(e)} />
                    <textarea name='inp' value={this.state.inp} onChange={e => this.changeValue(e)}></textarea>
                </div>
                <hr />
                <div>
                    <select name="selectStr" value={this.state.selectStr} onChange={e => this.changeValue(e)}>
                        <option value="烧烤">烧烤</option>
                        <option value="西瓜">西瓜</option>
                        <option value="苦瓜">苦瓜</option>
                        <option value="快餐">快餐</option>
                    </select>
                    -------- {this.state.selectStr}
                </div>
                <hr />
                <div>
                    <input name="sex" value={'男'} type="radio" onChange={e => this.changeValue(e)} /> 男
                    <input name="sex" value={'女'} type="radio" onChange={e => this.changeValue(e)} /> 女
                    <br />
                    ---- 你选择的是：{this.state.sex}
                </div>

                <hr />
                <div>
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'睡觉'} /> 睡觉
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'吃饭'} /> 吃饭
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'写代码'} /> 写代码
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'篮球'} /> 篮球
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'羽毛球'} /> 羽毛球
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'游泳'} /> 游泳
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'跑步'} /> 跑步
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'散步'} /> 散步
                </div>
                {this.state.hobby}

            </div>
        </>
    }
}